<!--交通指引-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="initial-scale=1.0,minimum-scale=1.0,maximum=1.0,user-scalable=no,width=device-width" name="viewport">
    <title>信基沙溪</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具"/>
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图"/>

    <link href="/xj/css/bootstrap.min.css" rel="stylesheet">
    <link href="/xj/css/trafficGuidance.css?v=1" rel="stylesheet">
    <link href="/xj/css/global.css" rel="stylesheet">
    <link href="/xj/css/style.css" rel="stylesheet">
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="/xj/js/html5shiv.min.js"></script>
    <script src="/xj/js/respond.min.js"></script>
    <![endif]-->
    <script src="/xj/js/jquery.min.js"></script>
</head>
<body style="margin:0">
<script src="/xj/js/jquery.min.js"></script>
<script src="/xj/js/bootstrap.min.js"></script>
<div class="globalstyle">
<div id="whole_box">
<div style="width: 100%;height: 100%">
    <!--头部标签-->
    <div class="box" style="padding-left:0px;">
        <img src="/xj/image/icon/arrow_left.png" class="back_icon"  v-on:click="getback">
    </div>
    <div class="headtags">
        <img class="imgimg" :src="title_img">
    </div>
    <!--百度地图容器-->
    <div style="width:100%;height:350px;border:#ccc solid 1px; margin-bottom: 25px;" id="dituContent">
    </div>
    <div class="navigate">
        <img @click="showtrafficcategory" class="navigateimg" src="/xj/image/navigate.png">
    </div>
    <div id="mode">
        <!--<div class="navigate">-->
            <!--<img @click="showtrafficcategory" class="navigateimg" src="/xj/image/navigate.png">-->
        <!--</div>-->
        <!--详细指引-->
        <div class="divquotes">
            <img class="quotes" src="/xj/image/quotes.jpg">
            <div class="divspancs"><span>{{detailed_guidance}}</span></div>
            <div class="divspan2"><span class="spanstyle">Detailed guidelines</span></div>
            <!--两起点-->
            <div class="divrowsize">
                <div class="viewcol" @click="hideModal">
                    <img class="viewcolimg" :src="traffic_icon1">
                    <span>{{From_txt}}：{{traffic1}}</span>
                </div>
                <div class="viewcol" @click="hideModal2">
                    <img class="viewcolimg" :src="traffic_icon2">
                    <span>{{From_txt}}：{{traffic2}}</span>
                </div>
            </div>
            <div style="height: 100px"></div>
        </div>

        <div class="modal-mask" @click="showVew" v-show="showModalView"></div>
        <div class="action" @click="hideModal" v-show="showModal">
            <div class="linestyle">
                <img class="lineimg" src="/xj/image/line.jpg">
            </div>
            <div class="divspan1">
                <span>{{startPoin}}</span>
            </div>
            <div class="divspan">
                <span class="divspan2" style="white-space: pre-wrap;">{{startPointRoute1}}</span>
            </div>
        </div>

        <div class="action" @click="hideModal2" v-show="showModal2">
            <div class="linestyle">
                <img class="lineimg" src="/xj/image/line.jpg">
            </div>
            <div class="divspan1">
                <span>{{startPoin}}</span>
            </div>
            <div class="divspan">
                <span class="divspan2"  style="white-space: pre-wrap;">{{startPointRoute2}}</span>
            </div>
        </div>

        <div class="action2" v-show="showcategory">
            <div class="viewEx">
                <!--地图API链接-->
              <a href="" class="mapBtn_g mapstyle">高德地图</a>
              <a href="" class="mapBtn_t mapstyle">腾讯地图</a>
                <a href="" class="mapBtn_b mapstyle">百度地图</a>
            </div>
        </div>
    </div>
</div>


<!--底部导航-->
<div class="nav_self">
    <div class="nav-one">
        <a href="/page/redirectHome"><img src="/xj/image/home.png" class="img"></a>
    </div>
    <div class="nav-view" style="white-space: pre">
        <a href="/page/redirectMarketopens" :class="three_box_txt_show ? '':'nav_encss'" >{{tab1}}</a>
    </div>
    <div class="nav-view" style="white-space: pre">
        <a href="/page/redirectInfor"   :class="three_box_txt_show ? '':'nav_encss'" >{{tab2}}</a>
    </div>
    <div class="nav-view">
        <a href="/page/redirectContractus"  :class="three_box_txt_show ? '':'nav_encss'">{{tab3}}</a>
    </div>

</div>
</div>
</div>
<!--<iframe src="/xj/bottom_navigation.htm" class="iframe-btomNavi" frameborder="0" scrolling="No" leftmargin="0"-->
        <!--topmargin="0"></iframe>-->
</body>
<!--<script src="/xj/js/vue.min.js"></script>-->
<script src="/xj/javascript/vue.js"></script>
<script type="text/javascript" src="/xj/javascript/trafficGuidance.js?v=1"></script>

</html>